<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航守卫</title>
</head>
<body>
    
</body><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套路由</title>
</head>
<body>
      <div id="app">
             <button @click.stop="handleClick('home')">主页</button>
             <button @click.stop="handleClick('introuduce')">公司介绍</button>
             <button @click.stop="handleClick('profile')">产品详情</button>
             <router-view></router-view>
      </div>
</body>
<script src="../vue-demos/node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script>
    let Home={
      //2.
         template:`<h1>主页的内容   <router-view></router-view></h1>`,
    };
    let Introuduce={
      template:`<h1>公司的介绍</h1>`
    };
    let Profile={ 
     template:`<h1>产品详情</h1>`
    };
  
    let User={
        template:`<h1>用户组件 </h1>`
    };
    let routes =[
        {
            path:"/home",
            component:Home,
             meta:{
                 title:"首页"
             },
  
            children:[
            {
                path:"user",
                component:User,
                meta:{
                 title:""
             },
            }
        ]
        },{
            path:"/introuduce",
            component:Introuduce,
            meta:{
                 title:"首页公司介绍"
             },
        },{
            path:"/profile",
            component:Profile,
            meta:{
                 title:"产品详情"
             },
        }
    ];
    let router = new VueRouter({
        routes   
    });
    router.beforeEach((to,from,next) =>{
        //从from跳转到to
       document.title = to.matched[0].meta.title;
       console.log(to);
       next()
    })
  
    //重写push方法 => 避免多次导航到同一个路径 报错
    let orginalPush = VueRouter.prototype.push;
     VueRouter.prototype.push = function(path){
       return orginalPush.call(this,path).catch(err=>err)
     };
   let vm = new Vue({
         el:"#app",
         router,
         methods:{
             handleClick:function(path){
                  console.log(this.$router) ;
                  this.$router.push(path)
             }
         }
     })
</script>
</html>
</html>